<template>
    <view>
        <view class="page">
            <view class="items">
                <view class="name md2Title">
                    头像
                </view>

                <view class="photo">
                    <avatar 
                            selWidth="120px" selHeight="120px" @upload="confirmImg" :inner="true" :noTab="true" :avatarSrc="avatar" expWidth="200px" expHeight="200px" 
                            avatarStyle="width: 100rpx; height: 100rpx; border-radius: 100%;">
                        </avatar>
                    <!-- <u-avatar :src="avatar" size="50" @click="show_avatar = true;"></u-avatar> -->
                </view>
            </view>
            <u-action-sheet :actions="[{name: '拍摄图片'}, {name: '相册图片'}]" :closeOnClickAction="true"
                :closeOnClickOverlay="true" :show="show_avatar" cancelText="取消" @select="setAvatar"
                @close="show_avatar = false;"></u-action-sheet>

            <view class="items">
                <view class="left">
                    <view class="type md4Text">
                        姓名
                    </view>

                    <view class="name name md2Title">
                        <input type="text" v-model="name" maxlength="4" placeholder="请输入">
                    </view>
                </view>
                <!-- <view class="right">
				<image src="../../static/imgs/right.png" mode=""></image>
			</view> -->
            </view>

            <view class="items" @click="show_gender = true;">
                <view class="left">
                    <view class="type md4Text">
                        性别
                    </view>

                    <view class="name name md2Title">
                        {{gender || '请选择'}}
                    </view>
                </view>

                <view class="right">
                    <image src="../../static/imgs/right.png" mode=""></image>
                </view>
            </view>
            <u-action-sheet :actions="[{name: '男'}, {name: '女'}]" :closeOnClickAction="true" :closeOnClickOverlay="true"
                :show="show_gender" cancelText="取消" @select="setGender" @close="show_gender = false;"></u-action-sheet>

            <view class="items" @click="show_work = true;">
                <view class="left">
                    <view class="type md4Text">
                        参加工作时间
                    </view>
                    <view class="name name md2Title">
                        {{work_date || '请选择'}}
                    </view>
                </view>

                <view class="right">
                    <image src="../../static/imgs/right.png" mode=""></image>
                </view>
            </view>
            <u-datetime-picker :show="show_work" :value="work_date || '2021-01'" :minDate="-1577952000000"
                :maxDate="Date.now()" mode="year-month" @confirm="setWorkDate" @cancel="show_work = false;">
            </u-datetime-picker>

            <view class="items" @click="show_birth = true;">
                <view class="left">
                    <view class="type md4Text">
                        出生年月
                    </view>

                    <view class="name name md2Title">
                        {{birth_date || '请选择'}}
                    </view>
                </view>

                <view class="right">
                    <image src="../../static/imgs/right.png" mode=""></image>
                </view>
            </view>
            <u-datetime-picker :show="show_birth" :value="birth_date || '2000-01'" :minDate="-1577952000000"
                :maxDate="Date.now()" mode="year-month" @confirm="setBirthDate" @cancel="show_birth = false;">
            </u-datetime-picker>

            <view style="margin-top: 60rpx;">
                <u-button type="primary" @click="nextStep()">确定</u-button>
            </view>
        </view>
        <view v-if="src">
            <!-- <avatar @upload="confirmImg" ref="avatar"></avatar> -->
            <!-- <reaee-image-clip :src="src" v-if="src" @ok="ok" :size="size" @cancel="src = false" :rectScale="0.5"></reaee-image-clip> -->
        </view>
    </view>
</template>

<script>
    import avatar from "@/components/yq-avatar/yq-avatar.vue";
    export default {
        data() {
            return {
                avatar: '',
                avatar_path: '/assets/img/avatar.png',
                show_avatar: false,
                name: '',
                gender: '',
                show_gender: false,
                work_date: '',
                show_work: false,
                birth_date: '',
                show_birth: false,

                is_resume: false,

                src: '',
                size: {
                    width: 300,
                    height: 300
                }
            };
        },
        components: {
            avatar
        },
        onLoad() {
            this.avatar = this._host + this.avatar_path;

            var resume = uni.getStorageSync('resume');
            if (resume) {
                this.is_resume = true;
                this.avatar = resume.avatar_url;
                this.avatar_path = resume.avatar;
                this.name = resume.name;
                this.gender = resume.gender;
                this.work_date = resume.work_date;
                this.birth_date = resume.birth_date;
            }
        },
        methods: {
            setAvatar(e) {
                this.show_avatar = false;
                var type = e.name === '相册图片' ? 'album' : 'camera';
                console.log(type);
                uni.chooseImage({
                    count: 1,
                    sourceType: [type],
                    success: (res) => {
                        this.src = res.tempFilePaths[0];
                    }
                })
            },
            confirmImg(e) {
                // console.log(JSON.stringify(e));
                if(e.path) {
                    this._upload({
                        url: '/api/common/upload',
                        filePath: e.path,
                        success: res => {
                            if(res.code == 1) {
                                this.avatar_path = res.data.url;
                                this.avatar = res.data.fullurl;
                            }else{
                                console.log(res.msg);
                                this._toast(res.msg);
                            }
                        }
                    });
                }
            },
            ok(e) {
                console.log(e);
                this.src = false;
                this._ajax({
                    url: '/api/common/uploadBase64',
                    data: {
                        file: e
                    },
                    success: res => {
                        if (res.code == 1) {
                            this.avatar_path = res.data.url;
                            this.avatar = res.data.fullurl;
                        } else {
                            this._toast(res.msg);
                        }
                    }
                }, 1);
            },
            setGender(e) {
                this.gender = e.name;
            },
            setWorkDate(e) {
                this.show_work = false;
                console.log(JSON.stringify(e));
                this.work_date = uni.$u.timeFormat(e.value, 'yyyy-mm');
            },
            setBirthDate(e) {
                this.show_birth = false;
                console.log(JSON.stringify(e));
                this.birth_date = uni.$u.timeFormat(e.value, 'yyyy-mm');
            },
            nextStep() {
                if (!this.avatar) {
                    return this._toast('请上传头像');
                }
                if (!this.name) {
                    return this._toast('请输入姓名');
                }
                if (!this.gender) {
                    return this._toast('请选择性别');
                }
                if (!this.work_date) {
                    return this._toast('请选择参加工作时间');
                }
                if (!this.birth_date) {
                    return this._toast('请选择出生年月');
                }
                if (this.is_resume) {
                    this._ajax({
                        url: '/api/user/updateResume',
                        data: {
                            avatar: this.avatar_path,
                            name: this.name,
                            gender: this.gender,
                            work_date: this.work_date,
                            birth_date: this.birth_date,
                            step: 1
                        },
                        success: res => {
                            if (res.code == 1) {
                                uni.setStorageSync('resume', res.data);
                                this._toBack();
                            } else {
                                this._toast(res.msg);
                            }
                        }
                    }, 1)
                } else {
                    this._ajax({
                        url: '/api/user/profile',
                        data: {
                            avatar: this.avatar_path,
                            name: this.name,
                            gender: this.gender,
                            work_date: this.work_date,
                            birth_date: this.birth_date
                        },
                        success: res => {
                            if (res.code == 1) {
                                uni.setStorageSync('user', res.data);
                                if (res.data.step == 2) {
                                    this._toView('login/step2');
                                }
                            } else {
                                this._toast(res.msg);
                            }
                        }
                    }, 1)
                }
            }
        }
    };
</script>

<style scoped lang="less">
    .page {
        background-color: #fff;
        padding: 0 32upx;

        .items {
            width: 100%;
            height: 156upx;
            border-bottom: 2upx solid #e5e5e5;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20upx;

            .photo {
                image {
                    width: 112upx;
                    height: 112upx;
                }
            }

            .left {
                .name {
                    font-weight: bold;
                    margin-top: 30upx;
                }
            }

            .right {
                image {
                    width: 48upx;
                    height: 48upx;
                }
            }
        }
    }

    .topBars {
        position: fixed;
        bottom: 0;
        z-index: 1200;
        border-radius: 40upx;
        overflow: hidden;
        background-color: #FFFFFF;
    }
</style>
